<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">食品留样</small>
      </a>
      <a class="operation" v-on:click="show =!show">
        <i class="el-icon-setting"></i> 操作
      </a>
  
      <!--dialog-->
      <transition name="fade">
        <div class="operatbox" v-show="show">
          <router-link :to='{name:"Splylistupdate",query:{dinner:this.listData,dinnerDishesList:this.tableData}}'>修改</router-link>
          <a @click="handleDelete()">删除</a>
        </div>
      </transition>
    </header>
  
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span>  <em>*</em>就餐类型</span>
            <div class="froms">
              <label>{{timeType[this.listData.timeType]}}</label>
  
            </div>
          </li>
          <li>
            <span>  <em>*</em>就餐日期</span>
            <div class="froms">
              <label>
                        {{this.listData.versionDate|time}}
                      </label>
            </div>
          </li>
          <li>
            <span>餐次</span>
            <div class="froms">
              <label>    {{type[this.listData.type]}}</label>
  
            </div>
          </li>
          <li>
            <span>事项</span>
            <div class="froms">
              <label> {{this.listData.matter}}</label>
  
            </div>
          </li>
          <li>
            <span>就餐人数：</span>
            <div class="froms">
              <label> {{this.listData.personNum}}(人)</label>
            </div>
          </li>
        </ul>
        <div class="tablebox">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>类别</th>
                <th>菜名</th>
                <th>原料</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in tableData" :key="item.unid">
                <td>{{index+1}}</td>
                <td>{{tabtype[item.type]}}</td>
                <td>{{item.dishesName}}</td>
                <td>{{item.materials}}</td>
              </tr>
            </tbody>
          </table>
        </div>
  
      </div>
    </main>
  </div>
</template>

<script>
  import {
    KeepSampleDelete,
    KeepSampleDetail
  } from '../../api/api';
  export default {
    data() {
      return {
        show: false,
        listData: '',
        tabtype: ['主菜', '凉菜', '主食', '汤', '水果'],
        timeType: ['早餐', '午餐', '晚餐'],
        type: ['三十人以上聚餐', '食堂用餐', '重大活动保障'],
        tableData:[],
      };
    },
    created() {
      // this.listData = JSON.parse(sessionStorage.getItem('Splylistdetail')).content
    },
    methods: {
      getData() {
        let options = {
          params: {
            unid: this.$route.query.unid,
          }
        }
        //调取接口
        KeepSampleDetail(options).then((res) => {
          if (res.success === true) {
            this.listData = res.data.dinner;
            this.tableData = res.data.dinnerDishesList
          }
        })
      },
      handleDelete() {
        let deletParams = {
          params: {
            unids: this.$route.query.unid,
          }
        }
        this.$confirm('是否删除此条信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          KeepSampleDelete(deletParams).then(() => {
            this.getData();
            this.$router.go(-1);
          });
        });
      },
    },
    mounted() {
      this.getData()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .tablebox {
    width: 98%;
    margin: 10px auto;
    table {
      border-collapse: collapse;
      border: #f1f1f1 solid 1px;
      width:100%;
      font-size:.9rem;
      th {
        background: #eef1f6;
        text-align: left;
        font-weight: bold;
        border: 1px solid #dfe6ec;
        padding: 8px 5px;
      }
      td {
        border: 1px solid #dfe6ec;
        height: 30px;
        padding: 0 5px;
      }
    }
  }
</style>
